<!DOCTYPE html>
<html lang="zh">
    <head>
        <meta charset="utf-8" />
        <title>提交题解</title>
        <!--<link rel="stylesheet" href="../../../css/bootstrap.css">
        <link rel="stylesheet" href="../../../css/style.css">
        <link rel="stylesheet" href="css/style.css" />-->
        <link rel="stylesheet" href="../css/editormd.css" />
        <link rel="shortcut icon" href="https://pandao.github.io/editor.md/favicon.ico" type="image/x-icon" />
        <script type="text/javascript" charset="utf-8" src="../../utf8-jsp/ueditor.config.js"></script>
        <script type="text/javascript" charset="utf-8" src="../../utf8-jsp/ueditor.all.min.js"> </script>
        <script type="text/javascript" charset="utf-8" src="../../utf8-jsp/lang/zh-cn/zh-cn.js"></script>

        <!-- Add Bootstrap CSS -->

        <style type="text/css">
            /*body {
                background-color: #36454f;
                color: white;
            }*/
            .dropbtn {
                background-color: transparent;
                color: white;
                padding-left: 35px;
                padding-right: 35px;
                font-size: 16px;
                border: none;
                cursor: pointer;
            }
            .dropdown {
                margin-left: 10px;
                position: relative;
                display: inline-block;text-align: center;
            }
            .dropdown-content {
                display: none;
                position: absolute;
                background-color: #f9f9f9;
                width: 100%;;
                box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
            }
            .dropdown-content a {
                color: black;
                padding: 12px 16px;
                text-decoration: none;
                display: block;
            }
            .dropdown-content a:hover {
                background-color: #f1f1f1
            }
            .dropdown:hover .dropdown-content {
                display: block;
            }
            .dropdown:hover .dropbtn {
                background-color: transparent;
            }
            .navbar {
                margin: 0;
                padding: 0;
                background-color: #222;
            }
            #daohang {
                display: inline-block;
                list-style-type: none;
                margin: 0;
                padding: 0;
                overflow: hidden;
                background-color: transparent;
            }
            #daohang li {
                float: left;
            }
            li a {
                display: inline-block;
                color: white;
                text-align: center;
                padding: 14px 16px;
                text-decoration: none;
            }
            /*li a:hover {*/
            /*    background-color: #111;*/
            /*}*/
            /* Add editor container style */
            .editor-container {
                width: 1024px;
                margin: 20px auto;
                padding: 20px;
                background-color: #fff;
                box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
                border-radius: 4px;
            }
            body {
                -webkit-background-size: cover;
                -moz-background-size: cover;
                background-attachment: fixed;
                margin: 0;
                font-family: Barlow, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
                font-size: 1rem;
                line-height: 1.5;
                text-align: left;
                /*background: url(../../img/background.png) center 0px;*/
            }
            .text-center {
                text-align: center !important;
            }

            .mb-4, .my-4 {
                margin-bottom: 1.5rem !important;
            }
            .mt-4, .my-4 {
                margin-top: 1.5rem !important;
            }
            *, *::before, *::after {
                box-sizing: border-box;
            }



            .btn-primary {
                border-radius: 8px;
                color: #fff;
                background-color: #5bc0de;
                border-color: #97d3e7; }
            .btn-primary:hover {
                color: #fff;
                background-color: #3ed4e8;
                border-color: #3ed4e8; }
            .btn-primary:focus, .btn-primary.focus {
                box-shadow: 0 0 0 0.2rem rgb(151, 211, 231); }
            .btn-primary.disabled, .btn-primary:disabled {
                background-color: #3ed4e8;
                border-color: #3ed4e8; }
            .btn-primary:not([disabled]):not(.disabled):active, .btn-primary:not([disabled]):not(.disabled).active,
            .show > .btn-primary.dropdown-toggle {
                color: #fff;
                background-color: #3ed4e8;
                border-color: #3ed4e8;
                box-shadow: 0 0 0 0.2rem rgb(151, 211, 231); }
            .btn-danger {
                border-radius: 8px;
                color: #fff;
                background-color: #51f392;
                border-color: #33ffa3; }
            .btn-danger:hover {
                color: #fff;
                background-color: #81f5c5;
                border-color: #00ff95; }
            .btn-danger:focus, .btn-danger.focus {
                box-shadow: 0 0 0 0.2rem rgba(148, 250, 196, 0.5); }
            .btn-danger.disabled, .btn-danger:disabled {
                background-color: #33ffa3;
                border-color: #75f3b0; }
            .btn-danger:not([disabled]):not(.disabled):active, .btn-danger:not([disabled]):not(.disabled).active,
            .show > .btn-danger.dropdown-toggle {
                color: #fff;
                background-color: #3eeea5;
                border-color: #48eea3;
                box-shadow: 0 0 0 0.2rem rgba(95, 180, 145, 0.5); }
        </style>
    </head>
    <body style="background-image: url(../images/background.png)">
    <nav class="navbar navbar-expand-md navbar-dark fixed-top sticky-navigation">
        <ul id="daohang">
            <li>
                <div style="margin-top: 10px;margin-bottom: 5px;display: inline-block;font-size: 20px" id="name" align="right
        ">
                    <a style="color: white" href="../../../index.html"><strong>别叫我OJ</strong></a>
                </div>
            </li>
            <li>
                <div style="margin-left:20px;margin-top: 13px;margin-bottom: 5px;display: inline-block" id="userDetail" align="right">
                    <a style="color: white" href="../../../userDetail.html">个人中心</a>
                </div>
            </li>
        </ul>
        <div style="display: inline-block;float: right" class="collapse navbar-collapse" id="topMenu">
            <ul class="navbar-nav ml-auto" >
                <div style="margin:5px;display: inline-block" id="javaoj">
                    <a style="color: white" href="../../../login.html" onclick="logout()"> 退出登录</a>
                    <div class="dropdown">
                        <button class="dropbtn">设置</button>
                        <div class="dropdown-content">
                            <a href="../../../updateInfo.html">修改个人信息</a>
                            <a href="../../../updatePassword.html">修改密码</a>
                        </div>
                    </div>
                </div>
            </ul>
        </div>
    </nav>
    <div>
        <div id="layout">
            <header>
                <h1 style="color: black">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;提交题解</h1>
            </header>
            <div id="test-editormd">
                <textarea>

</textarea>
            </div>

<!--            <div class="selfile" style="margin-top:30px;margin-left:31px;">
                <input type="file" id="fileop" name="file" multiple="true" class="fileop" />
                <a id="xzwjbtn" href="javascript:void(0)" class="easyui-linkbutton xzwjbtn">选择文件</a>
                <input type="text" id="filete" name="filename" class="easyui-validatebox xzwj" style="width:180px;height:25px;margin-left:10px;padding-left:5px;" readonly="true"/>
            </div>-->
            <div id="btns" class="text-center my-4">
                <input type="file"  id="fileInput" style=" ;font-size: 20px;color: black ;" accept="image/*">
                <button class="btn btn-primary" onclick="uploadFile()" style="font-size: 20px">插入图片</button>
                <button class="btn btn-primary" onclick="addAnswer()" style="font-size: 20px">提交题解</button>
            </div>
            <script>
                function uploadFile() {
                    var fileInput = document.getElementById('fileInput');
                    var file = fileInput.files[0];

                    if (file) {
                        var formData = new FormData();
                        formData.append('file', file);

                        var xhr = new XMLHttpRequest();
                        xhr.open('POST', 'http://8.140.22.162:9555/api/file/upload');
                        xhr.onload = function() {
                            if (xhr.status === 200) {
                                var response = JSON.parse(xhr.responseText);
                                displayResult(response);
                            } else {
                                console.error('请求失败:', xhr.status);
                            }
                        };
                        xhr.send(formData);
                    }
                }

                function displayResult(data) {
                    console.log(data);
                    var content = testEditor.getValue();
                    content+="<img src=\"" +
                        data.data +
                        "\" alt=\"图片描述\" style=\"width: px;height: px;\">";
                    testEditor.setValue(content);
                }
            </script>

        </div>
        <script src="js/jquery.min.js"></script>
        <script src="../editormd.min.js"></script>
        <script type="text/javascript">
			var testEditor;
            //默认开启html解析
            testEditor = editormd("test-editormd", {
                width: "90%",
                height: 720,
                path : '../lib/',
                htmlDecode : true,   // Decode all html tags & attributes
                // Expression : tagName,tagName,...|attrName,attrName,...
                //htmlDecode : "style,script,iframe,sub,sup|on*"  // Filter tags, and all on* attributes
                //htmlDecode : "style,script,iframe,sub,sup|*"    // Filter tags, and all attributes
                //htmlDecode :   "style,script,iframe,sub,sup,embed|onclick,title,onmouseover,onmouseout,style" // Filter tags, and your custom attributes
            });

            var userId=localStorage.getItem("userId");
            console.log("userId:"+userId)
            var password=localStorage.getItem("password");
            console.log("password:"+password)
            //获取用户登录信息，获取失败则返回登录页面
            function getUser(){
                if (userId==null){
                    location.assign("../../../login.html");
                }
            }
            function logout(){
                localStorage.clear();
            }
            //getUser();

            // 使用函数获取id参数
            const id = localStorage.getItem("questionId");
            console.log("ID:", id);

            let problemTitle = document.getElementById("problemTitle");

            //提交题解
            function addAnswer() {
                // 获取编辑器的内容
                var content = testEditor.getValue();
                console.log(content);
                let answer={
                    userId:userId,
                    questionId:id,
                    content:content,
                };
                console.log(answer);
                if(content!=null){
                    $.ajax({
                        url:"http://192.168.47.129:8010/user/publishAnswer",
                        type:"POST",
                        contentType:"application/json; charset=utf-8",
                        data:JSON.stringify(answer),
                        success:function(data){
                            console.log(data);
                            location.assign("/dont-call-me-oj-browser/web/answer.html");
                        }
                    })
                }
            }
        </script>
    </div>

    </body>
</html>